<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作文批改小程序原型</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: #f5f5f5;
    }
    
    h1, h2 {
      text-align: center;
    }
    
    .prototype-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      margin-top: 30px;
    }
    
    .prototype-item {
      width: 390px;
      margin-bottom: 50px;
    }
    
    .prototype-label {
      text-align: center;
      margin-bottom: 10px;
      font-weight: bold;
      font-size: 18px;
    }
    
    iframe {
      border: none;
      width: 100%;
      height: 844px;
      border-radius: 44px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <h1>作文批改小程序原型</h1>
  <h2>为25-45岁家长提供的智能作文批改解决方案</h2>
  
  <div class="prototype-container">
    <div class="prototype-item">
      <div class="prototype-label">1. 登录授权页面</div>
      <iframe src="pages/login.html" title="登录授权页面"></iframe>
    </div>
    
    <div class="prototype-item">
      <div class="prototype-label">2. 手机号绑定页面</div>
      <iframe src="pages/phone-bind.html" title="手机号绑定页面"></iframe>
    </div>
    
    <div class="prototype-item">
      <div class="prototype-label">3. 首页</div>
      <iframe src="pages/home.html" title="首页"></iframe>
    </div>
    
    <div class="prototype-item">
      <div class="prototype-label">4. 作文上传页面</div>
      <iframe src="pages/upload.html" title="作文上传页面"></iframe>
    </div>
    
    <div class="prototype-item">
      <div class="prototype-label">5. 批改结果页面</div>
      <iframe src="pages/correction.html" title="批改结果页面"></iframe>
    </div>
    
    <div class="prototype-item">
      <div class="prototype-label">6. 积分充值页面</div>
      <iframe src="pages/recharge.html" title="积分充值页面"></iframe>
    </div>
    
    <div class="prototype-item">
      <div class="prototype-label">7. 个人中心页面</div>
      <iframe src="pages/profile.html" title="个人中心页面"></iframe>
    </div>
  </div>
  
  <script src="js/main.js"></script>
</body>
</html> 